<template>
  <view class="page">
    <view class="page-hd">
      <SearchBox placeholder="搜索商品名称、编号、规格、条码"></SearchBox>
    </view>
    <view class="page-bd">
      <ScrollMenu
        type="customItem"
        v-model="current"
        @selected="handleSelect"
        :data="classifyData"
      >
        <template #default="{data}">
          <view class="product-list">
            <!-- data为数据项 -->
            <ProductInfoView
              v-for="(pItem, index) in data"
              type="checkbox"
              :data="pItem"
              :key="index"
              @onAdd="handleAdd"
              @onInput="handleInput"
              @onEdit="handleEdit"
            ></ProductInfoView>
          </view>
        </template>
      </ScrollMenu>
      <view class="ui-line"></view>
    </view>
    <view class="page-ft">
      <view class="info">
        <text class="iconfont icon-a-32_32_bag"></text>
        <text class="text">共盘点2种，28个</text>
      </view>
      <view class="buttons-wrap">
        <view class="ui-button button-style--primary" @click="handleSubmit"
          >选好了</view
        >
      </view>
    </view>

    <AddModal
      v-model:visible="showModal"
      :data="modalAddProductData"
      @onConfirm="handleModalAddProduct"
    />
  </view>
</template>

<script setup>
import SearchBox from '@/components/base-components/search-box/search-box.vue';
import ScrollMenu from '@/components/base-components/scroll-menu/scroll-menu.vue';
import classifyData from "@/mock/chooseGoods.data";
import ProductInfoView from '@/components/base-components/product-info-view/product-info-view.vue';
import AddModal from './components/addModal.vue';
import {ROUTE} from '@/constant/constant'

const showModal = ref(false);
// 添加商品数据
const modalAddProductData = reactive({});
const handleTest = (data) => {
  console.log("🚀 ~ handleTest ~ data:", data)
}

// 添加
const handleAdd = (d) => {
  showModal.value = true;

  console.log("🚀 页面 ~ handleAdd ~ d:", d)
}

// 编辑
const handleEdit = (d) => {
  console.log("🚀 ~ handleEdit ~ d:", d)
}

// 录入
const handleInput = (d) => {
  console.log("🚀 ~ handleInput ~ d:", d)
  proxy.$tab.navigateTo(ROUTE.PAGE_APPS.INPUT);

}

// 弹窗确认添加商品
const handleModalAddProduct = (data) => {
  console.log("🚀 ~ 页面handleModalAddProduct ~ data: 确认添加商品", data);
}
</script>

<style scoped lang="scss">
@import "@/static/scss/theme.scss";


.page {
  height: 100vh;
  background-color: #F4F8FB;
  display: flex;
  flex-direction: column;


  &-hd {
    padding: 16rpx 32rpx;
    background-color: #fff;
  }

  &-bd {
    flex: 1;
    margin-top: 20rpx;
  }

  ::v-deep {
    .card-view {
      padding: 0 32rpx;
    }
    .form-item-view {
      justify-content: space-between;
      height: 96rpx;
      font-size: 26rpx;
      display: flex;
      align-items: center;

      & + .form-item-view {
        border-top: 1px solid $border-color;
      }
    }
  }

  &-ft {
    display: flex;
    height: 150rpx;
    padding: 20rpx 24rpx;
    // align-items: center;
    justify-content: space-between;
    border-top: 1rpx solid $border-color;

    .info {

      color: $text-l3-color;
      font-size: 28rpx;
    }
  }

  .product-list {
    margin: 24rpx 32rpx;
    display: flex;
    flex-direction: column;
    gap: 24rpx;
  }

}
</style>
